/*
 * @Description: 收藏详情
 * @Author: kanglin
 * @Date: 2018-06-11 18:41:54
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';
	.collection-detail{
		color: #444444;
		padding-bottom: 40*@rem-per-px;
		.header__store{
			padding: 26*@rem-per-px 38*@rem-per-px 20*@rem-per-px;
		}
		.header__store__logo{
			width: 52*@rem-per-px;
			height: 52*@rem-per-px;
			overflow: hidden;
			border-radius: 50%;
			display: inline-block;
			&> img{
				width: 100%;
			}
		}
		.header__store__name{
			font-size: 30*@rem-per-px;
			vertical-align: top;
			line-height: 52*@rem-per-px;
			margin-left: 5*@rem-per-px;
		}
		.header__address{
			padding: 0 42*@rem-per-px 24*@rem-per-px;
		}

		.header__address__icon{
			display: inline-block;
			width: 34*@rem-per-px;
			height: 34*@rem-per-px;
			background-repeat: no-repeat;
			background-size: 100%;
			vertical-align: -.2em;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/collection/icon_address.png');
		}
		.header__address__text{
			vertical-align: .3em;
		}


		.picture{
			margin:0 38*@rem-per-px;
			border-radius: 20*@rem-per-px;
			overflow: hidden;
			margin-bottom: 10*@rem-per-px;
			&>img {
				width: 100%;
			}
		}
	}
</style>

<template>
	<div class="collection-detail">
		<back
			:name="$t('collection.user_center')"
			path="/" />
		<div class="header__store">
			<span class="header__store__logo">
				<img
					:src="store_img_src"
					alt="">
			</span>
			<span class="header__store__name">
				{{ name }}
			</span>
		</div>
		<div class="header__address">
			<i class="header__address__icon"/>
			<span class="header__address__text">{{ address }}</span>
		</div>


		<div class="picture">
			<img
				:src="getCollectionDetail && getCollectionDetail.try_on_photo"
				alt="">
		</div>
		<collection-products
			v-if="products && products.length > 0"
			:products="products" />
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import Back from 'src/views/component/back';
import { isWechat } from 'src/utils/helper';
import CollectionProducts from './products';

export default {
	name: 'CollectionDetail',
	components: {
		'collection-products': CollectionProducts,
		back: Back,
	},
	data() {
		return {
			// products: (this.getCollectionDetail && this.getCollectionDetail.products) ? this.getCollectionDetail.products : [],
			// is_in_web_app: isInWebApp(),
			is_wechat: isWechat(),

		};
	},
	computed: {
		...mapGetters('collection', ['getCollectionDetail']),
		store_img_src() {
			const has_img = this.getCollectionDetail && this.getCollectionDetail.store && this.getCollectionDetail.store.store_img;
			return has_img ? this.getCollectionDetail.store.store_img : '';
		},
		address() {
			const has_address = this.getCollectionDetail && this.getCollectionDetail.store && this.getCollectionDetail.store.address;
			return has_address ? this.getCollectionDetail.store.address : this.$t('common.none');
		},
		name() {
			const has_name = this.getCollectionDetail && this.getCollectionDetail.store && this.getCollectionDetail.store.name;
			return has_name ? this.getCollectionDetail.store.name : this.$t('common.none');
		},
		products() {
			const has_products = this.getCollectionDetail && this.getCollectionDetail.products;
			return has_products ? this.getCollectionDetail.products : [];
		},
	},
	mounted() {
		this.initPageData();
	},
	methods: {
		...mapActions('collection', ['fetchCollectionAction']),
		initPageData() {
			const detail = this.getCollectionDetail;
			if (typeof detail === 'object' && !detail) { // 若vuex中没有保存了详情, 需要请求详情数据
				const { id } = this.$route.params;
				if (!Number.isNaN(id)) {
					this.fetchDetail(id);
				} else { // 参数错误重定向到 收藏列表
					this.$router.replace({ path: '/collection' });
				}
			}
		},

		/**
		 *  请求详情
		 *  @param {number} id
		 * 	@return {undefined}
		 */
		fetchDetail(id) {
			this.fetchCollectionAction(id)
				.catch((error) => {
					const toast = this.$createToast({
						type: 'error',
						time: 2000,
						txt: error.message,
					});
					toast.show();
					this.$router.replace({ path: '/collection' });
				});
		},
	},
};
</script>
